<template>
  <body class="login_signup_page">
    <header>
      <h2 class="logo">MuteMelody</h2>
      <nav class="navigation">
        <a @click="toFirstPage" id="home">Home</a>
        <a class="toabout" @click="toAbout">About</a>
        <a class="btnContact-popup">Contact</a>
        <button class="btnLogin-popup" @click="login_popup">
          {{ buttonText }}
        </button>
      </nav>
    </header>
    <div class="wrapper">
      <span class="icon-close">
        <ion-icon name="close"></ion-icon>
      </span>
      <div class="form-box login">
        <h2>Login</h2>
        <form>
          <div class="input-box">
            <span class="icon">
              <ion-icon name="mail"></ion-icon>
            </span>
            <input
              type="email"
              v-model="login_email"
              @focus="onInputFocus('login-email')"
              @blur="onInputBlur('login-email')"
              required
            />
            <label :class="{ up: isLoginEmailFocused || login_email }"
              >Email</label
            >
          </div>
          <div class="input-box">
            <span class="icon">
              <ion-icon name="lock-closed"></ion-icon>
            </span>
            <input
              type="password"
              v-model="login_password"
              @focus="onInputFocus('login-password')"
              @blur="onInputBlur('login-password')"
              required
            />
            <label :class="{ up: isLoginPasswordFocused || login_password }"
              >Password</label
            >
          </div>
          <div class="remember-forgot">
            <label>
              <input type="checkbox" />
              Remember me
            </label>
            <a>Forgot Password?</a>
          </div>
          <button type="button" class="btn" @click="submit_login1">
            Log in
          </button>
          <div class="login-register">
            <p>
              Don't have an account?
              <a class="register-link">Register</a>
            </p>
          </div>
        </form>
      </div>

      <div class="form-box register">
        <h2>Registeration</h2>
        <form>
          <div class="input-box">
            <span class="icon">
              <ion-icon name="person"></ion-icon>
            </span>
            <input
              type="text"
              v-model="register_username"
              @focus="onInputFocus('register-username')"
              @blur="onInputBlur('register-username')"
              required
            />
            <label
              :class="{ up: isRegisterUsernameFocused || register_username }"
              >Username</label
            >
          </div>
          <div class="input-box">
            <span class="icon">
              <ion-icon name="mail"></ion-icon>
            </span>
            <input
              type="email"
              v-model="register_email"
              @focus="onInputFocus('register-email')"
              @blur="onInputBlur('register-email')"
              required
            />
            <label :class="{ up: isRegisterEmailFocused || register_email }"
              >Email</label
            >
          </div>
          <div class="input-box">
            <span class="icon">
              <ion-icon name="lock-closed"></ion-icon>
            </span>
            <input
              type="password"
              v-model="register_password"
              @focus="onInputFocus('register-password')"
              @blur="onInputBlur('register-password')"
              required
            />
            <label
              :class="{ up: isRegisterPasswordFocused || register_password }"
              >Password</label
            >
          </div>
          <div class="remember-forgot">
            <label>
              <input type="checkbox" v-model="isChecked" />
              agree to the terms & conditions
            </label>
          </div>
          <button type="submit" class="btn" @click="submit_register">
            Register
          </button>
          <div class="login-register">
            <p>
              Already have an account?
              <a class="login-link">Log in</a>
            </p>
          </div>
        </form>
      </div>
    </div>

    <div class="gesture-info">
      <div id="overview"><p></p></div>
      <div id="history"><p></p></div>
      <div id="category"><p></p></div>
      <div id="Value-identity"><p></p></div>
      <button id="gbb1" class="gbb">←back</button>
    </div>

    <div class="text-base" id="OV">
      <h2>OVERVIEW</h2>
      <p>
        Sign language is a form of communication and expression that utilizes
        hand and hand movements. It serves as the primary means of communication
        for the deaf and is widely used for communication among individuals with
        hearing impairments.
      </p>
      <p>
        Unlike oral languages, sign language conveys meaning and transmits
        information through gestures, hand positions, finger shapes, and the
        speed and direction of gestures. It incorporates gestures, facial
        expressions, and body movements to convey a wide range of meanings and
        messages. Sign language is not merely a silent mode of communication; it
        also represents the unique culture and identity of the deaf community.
        By learning and understanding sign language, we can promote inclusivity
        and respect, and establish a more accessible and equitable society.
      </p>
      <button id="gbb2" class="gbb2">←back</button>
    </div>
    <div class="text-base" id="HI" style="overflow-y: scroll">
      <h2>HISTORY</h2>
      <p>
        Although language has a long history, formal deaf education did not
        develop until over 400 years ago. The first notable deaf educator was
        Father Charles-Michel de l'Épée in France. In 1760, he established a
        national deaf school from his shelter and was appointed as the first
        principal. However, due to the complexity and abstractness of sign
        language, it became challenging to understand, so oral teaching method
        replaced sign language after 1880.
      </p>
      <p>
        In 1817, the United States established an asylum for the deaf and began
        using sign language. In 1880, Japan established its first school for the
        deaf in Tokyo, followed by schools in Osaka and Kyoto. During the
        50-year Japanese occupation of Taiwan starting from 1895, schools for
        the deaf were established in Tainan and Taipei, where they used mostly
        Tokyo and Osaka sign language.
      </p>
      <p>
        In 1887, American missionary Mrs. Mary W. D. Mears founded the Qiuyin
        School for the Deaf in Shandong, China, and used oral teaching methods.
        She published a primer called "Qiuyin Chu Jie," which was edited in the
        phonetic alphabet of Bailey. The Mainland Chinese sign language used by
        the deaf also spread widely in Beijing, Shanghai, Nanjing, Guangdong,
        and even Hong Kong.
      </p>
      <p>
        After Taiwan's liberation in 1945, Japanese teachers were repatriated,
        and some teachers from mainland China's deaf schools worked in Taipei's
        Qicong School. Principal Jiang of the Qiyin School on the left bank
        graduated from the mainland Qiyin School and adopted the sign language
        of the mainland. With deaf people scattered across different regions,
        the sign languages used by them gradually differentiated.
      </p>
      <p>
        On July 1, 2018, China implemented the "National Common Sign Language
        Vocabulary" and "National Common Braille Scheme" as language and text
        standards.On March 1, 2021, the National Language Commission officially
        implemented the "National Common Sign Language Scheme of the National
        Anthem of the People's Republic of China" as a language and text
        standard.
      </p>
      <button id="gbb3" class="gbb2">←back</button>
    </div>
    <div class="text-base" id="CA" style="overflow-y: scroll">
      <h2>CATEGORY</h2>
      <p>
        There are approximately 300 sign languages still in use around the
        world. This number is an estimate, as newly developed sign languages
        often undergo creolization. In some countries, such as Sri Lanka and
        Tanzania, each deaf school may have its own unique sign language that is
        used exclusively by its students, sometimes even denied by the schools
        themselves. On the other hand, different countries may share the same
        sign language, although it may be referred to by different names (e.g.,
        Croatian Sign Language and Serbian Sign Language; Indian Sign Language
        and Pakistani Sign Language).
      </p>
      <p>
        American Sign Language and British Sign Language both have their own
        grammar structure that is unrelated to English. However, while the
        regions in which they are used differ, American Sign Language also
        utilizes body movements in addition to hand gestures and facial
        expressions.French Sign Language has its own independent system of
        gestures and grammatical rules, with hand gestures emphasizing the shape
        and position of hands while facial expressions play an important role
        too.
      </p>
      <p>
        Australian Sign Language combines elements from British, Irish, and
        American Sign Languages and uses hand gestures, facial expressions, and
        body movements together. Canadian Sign Language is based on French Sign
        Language but also influenced by American and British Sign Languages,
        with hand gestures, facial expressions, and body movements all being
        important forms of communication.
      </p>
      <p>
        The "National Commonly Used Vocabulary for Sign Language" and the
        "National Common Braille Scheme" in China respectively specify the
        standardized actions for commonly used sign language vocabulary and the
        rules for writing the national common language in braille. The "National
        Commonly Used Vocabulary for Sign Language" clearly includes a wide
        range of sign languages that are widely used in the daily lives of
        people with hearing disabilities. It replaces many hand gestures that
        used to correspond one-to-one with Chinese characters, greatly reducing
        the use of finger letters and emphasizing the changes in body movements
        and facial expressions when describing sign language expressions, with a
        focus on reflecting the linguistic characteristics of sign language
        expression. The "National Common Braille Scheme" adopts the current
        braille system's initials, vowels, tones, and punctuation marks, without
        changing, deleting, or adding any symbols, only improving the current
        braille tone marking rules and regulating the use of tone symbols. The
        national common braille can smoothly transition with the current
        braille. People who have learned the national common braille do not need
        preparatory study to read previous versions of the current braille
        books.
      </p>
      <button id="gbb4" class="gbb2">←back</button>
    </div>
    <div class="text-base" id="VA" style="overflow-y: scroll">
      <h2>VALUE&IDENTITY</h2>
      <p>
        There are three communication methods for individuals with hearing
        impairments: oral language, sign language, and a combination of both.
        Although oral language is the dominant method worldwide, sign language
        still holds its inherent value. Speaking one syllable at a time can be
        exhausting for individuals with hearing impairments, so they prefer sign
        language over spoken communication. Apart from maintenance and training
        classes where hearing aids are worn to facilitate oral language
        teaching, the emphasis is mostly on sign language teaching, or a
        combination of both, especially for primary, middle, and high school
        students, as well as those who are completely deaf, who rely on sign
        language for communication.
      </p>
      <p>
        Learning sign language is not only beneficial for communicating with
        deaf and mute individuals, but it can also be useful among the general
        population. In noisy factories or public places, sign language proves to
        be convenient for communication. Elderly participants in sign language
        classes have expressed that as they age and their hearing deteriorates,
        they want to learn sign language in order to teach their family members
        and facilitate communication. Educators have stated that teaching
        children sign language songs and rhymes can enhance their singing,
        playing, and creative abilities. Sign language is accessible to
        everyone, regardless of age or profession. It can even be used by
        individuals who are unable to speak to express themselves. While writing
        is an option, it has certain limitations. Relatives of hearing-impaired
        individuals believe that learning sign language can reduce
        misunderstandings and strengthen emotional connections. For example, a
        dentist who learned sign language experienced a surge in business as
        deaf individuals flocked to his clinic, spreading the word about his
        services.
      </p>
      <p>
        Sign language is the best language for individuals with hearing
        impairments and speech disorders. It serves as a means of communication
        and learning for them. Each ethnic group has its own language, which
        holds strong national sentiments. While individuals with hearing
        impairments and speech disorders do not form a single ethnic group,
        their physical disabilities and shared experiences naturally create a
        collective identity. The need for a means of communication gave rise to
        their special language—sign language. Sign language can be considered
        the "national language" for individuals with hearing impairments and
        speech disorders, as they have a deep emotional attachment to it.
      </p>
      <p>
        Gestures originated alongside human society, and considering gestures as
        a language developed in sync with the education of deaf individuals.
        Before the establishment of schools for the deaf, simple gestures used
        by individuals in society did not constitute a formal sign language. The
        development of deaf education, the needs of teaching, and the mutual
        requirements of individuals with hearing impairments and speech
        disorders led to the gradual expansion of sign language vocabulary and
        the formation of its grammatical rules, eventually resulting in a
        distinct language.
      </p>
      <button id="gbb5" class="gbb2">←back</button>
    </div>

    <div class="wrapper-contact">
      <span class="icon-close-contact">
        <ion-icon name="close"></ion-icon>
      </span>
      <div class="div-contact">Contact us</div>
      <div class="div-contact-us">
        <div>SunYuxin:2111789@mail.nankai.edu.cn</div>
        <div>QueZijing:2111789@mail.nankai.edu.cn</div>
        <div>LiuKairui:2111772@mail.nankai.edu.cn</div>
        <div>WangYining:2112386@mail.nankai.edu.cn</div>
        <div>MiaoWeiZi:2113931@mail.nankai.edu.cn</div>
      </div>
    </div>
    <div class="cards_fold">
      <div class="container_card">
        <div
          class="glass"
          style="--r: -15"
          data-text="Recognition"
          @click="startRealTimeCapture"
        >
          <i class="bx bx-camera"></i>
        </div>
        <div
          class="glass"
          style="--r: 25"
          @click="myfunction(3)"
          data-text="Tutorial"
        >
          <i class="bx bx-book-reader"></i>
        </div>
        <div
          class="glass"
          style="--r: -15"
          @click="toUsercenterPage"
          data-text="UserCenter"
        >
          <i class="bx bxs-user-detail"></i>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
  name: "main-page",
  data() {
    return {
      buttonText: "Log in",
      register_username: "",
      register_email: "",
      register_password: "",
      login_email: "",
      login_password: "",
      login_name: "",
      isChecked: false,
      isLoginEmailFocused: false,
      isLoginPasswordFocused: false,
      isRegisterUsernameFocused: false,
      isRegisterEmailFocused: false,
      isRegisterPasswordFocused: false,
      isnext: true,
    };
  },
  created() {
    if (sessionStorage.getItem("isUserLogged") === "true") {
      this.buttonText = "Log out";
    } else {
      this.buttonText = "Log in";
    }
  },
  methods: {
    login_popup() {
      sessionStorage.setItem("isUserLogged", "false");
      console.log(sessionStorage.getItem("isUserLogged"));
      this.buttonText = "Log in";
    },
    toFirstPage() {
      this.$router.push({
        path: "/",
      });
    },
    toAbout() {
      console.log("gesture info");
      const gesture = document.querySelector(".gesture-info");
      gesture.style.transform = "scale(1)";
    },
    toUsercenterPage() {
      if (sessionStorage.getItem("isUserLogged") === "true") {
        console.log("toUsercenterPage");
        this.$router.push({
          path: "/toUsercenterPage",
        });
      } else {
        ElMessage({
          showClose: true,
          message: "请先登录，才能进入用户中心！",
          type: "warning",
        });
      }
    },
    myfunction(function_index) {
      if (sessionStorage.getItem("isUserLogged") === "true") {
        this.$router.push({
          path: "/my_function",
          query: {
            function_index: function_index,
          },
        });
      } else {
        ElMessage({
          showClose: true,
          message: "请先登录，再使用功能！",
          type: "warning",
        });
      }
    },
    startRealTimeCapture() {
      if (sessionStorage.getItem("isUserLogged") === "true") {
        this.axios
          .post("http://127.0.0.1:8000/recognition/")
          .then((res) => {
            console.log(res.data);
            // 这里可以根据需要处理成功或失败的情况
          })
          .catch((error) => {
            console.error("Error:", error);
          });
      } else {
        ElMessage({
          showClose: true,
          message: "请先登录，再使用功能！",
          type: "warning",
        });
      }
    },
    onInputFocus(field) {
      if (field === "login-email") {
        this.isLoginEmailFocused = true;
      } else if (field === "login-password") {
        this.isLoginPasswordFocused = true;
      } else if (field === "register-username") {
        this.isRegisterUsernameFocused = true;
      } else if (field === "register-email") {
        this.isRegisterEmailFocused = true;
      } else if (field === "register-password") {
        this.isRegisterPasswordFocused = true;
      }
    },
    onInputBlur(field) {
      if (field === "login-email" && !this.login_email) {
        this.isLoginEmailFocused = false;
      } else if (field === "login-password" && !this.login_password) {
        this.isLoginPasswordFocused = false;
      } else if (field === "register-username" && !this.register_username) {
        this.isRegisterUsernameFocused = false;
      } else if (field === "register-email" && !this.register_email) {
        this.isRegisterEmailFocused = false;
      } else if (field === "register-password" && !this.register_password) {
        this.isRegisterPasswordFocused = false;
      }
    },
    register_success() {
      ElMessage({
        showClose: true,
        message: "注册成功！",
        type: "success",
      });
      const wrapper = document.querySelector(".wrapper");
      wrapper.classList.remove("active");
    },

    warning(mes) {
      ElMessage({
        showClose: true,
        message: mes,
        type: "warning",
      });
    },
    login_success() {
      ElMessage({
        showClose: true,
        message: "登录成功！",
        type: "success",
      });
      sessionStorage.setItem("isUserLogged", "true");
      this.buttonText = "Log out";
      const wrapper = document.querySelector(".wrapper");
      wrapper.classList.remove("active-popup");

      const cards_fold = document.querySelector(".cards_fold");
      cards_fold.style.transform = "scale(1)";
    },

    error(mes) {
      ElMessage({
        showClose: true,
        message: mes,
        type: "error",
      });
    },

    submit_register() {
      console.log("register");
      console.log(
        this.register_username,
        this.register_email,
        this.register_password
      );

      const params = new URLSearchParams();
      params.append("register_username", this.register_username);
      params.append("register_email", this.register_email);
      params.append("register_password", this.register_password);
      params.append("isChecked", this.isChecked);

      this.axios
        .post("http://127.0.0.1:8000/register/", params)
        .then((res) => {
          console.log(res.data);

          if (res.data.success) {
            this.register_success();
          } else {
            this.warning(res.data.message);
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    submit_login1() {
      console.log("login");
      console.log(this.login_email, this.login_password);

      const params = new URLSearchParams();
      params.append("login_email", this.login_email);
      params.append("login_password", this.login_password);

      this.axios
        .post("http://127.0.0.1:8000/login/", params)
        .then((res) => {
          console.log(res.data);
          if (res.data.success) {
            this.login_name = res.data.data["name"];
            console.log(this.login_name);
            this.login_success();
          } else {
            if (res.data["message"] === "密码错误！") {
              this.error(res.data.message);
            } else {
              this.warning(res.data.message);
            }
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },

  mounted() {
    // 通过JS在mounted生命周期中动态创建并插入script标签
    // const script1 = document.createElement("script");
    // script1.src = "script.js";
    // document.head.appendChild(script1);

    const script2 = document.createElement("script");
    script2.type = "module";
    script2.src =
      "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js";
    document.head.appendChild(script2);

    const script3 = document.createElement("script");
    script3.setAttribute("nomodule", "");
    script3.src = "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js";
    document.head.appendChild(script3);

    const wrapper = document.querySelector(".wrapper");
    const wrapperContact = document.querySelector(".wrapper-contact");
    const loginLink = document.querySelector(".login-link");
    const registerLink = document.querySelector(".register-link");
    const contactPopup = document.querySelector(".btnContact-popup");
    const btnPopup = document.querySelector(".btnLogin-popup");
    const iconClose = document.querySelector(".icon-close");
    const iconCloseContact = document.querySelector(".icon-close-contact");
    const cards_fold = document.querySelector(".cards_fold");
    const toabout = document.querySelector(".toabout");
    const gesture = document.querySelector(".gesture-info");
    const overview = document.getElementById("overview");
    const OV = document.getElementById("OV");
    const history = document.getElementById("history");
    const HI = document.getElementById("HI");
    const category = document.getElementById("category");
    const CA = document.getElementById("CA");
    const value = document.getElementById("Value-identity");
    const VA = document.getElementById("VA");
    const gbb1 = document.getElementById("gbb1");
    const gbb2 = document.getElementById("gbb2");
    const gbb3 = document.getElementById("gbb3");
    const gbb4 = document.getElementById("gbb4");
    const gbb5 = document.getElementById("gbb5");
    const home = document.getElementById("home");
    home.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      OV.style.transform = "scale(0)";
      HI.style.transform = "scale(0)";
      CA.style.transform = "scale(0)";
      VA.style.transform = "scale(0)";
      wrapperContact.classList.remove("active-popup");
    });
    gbb1.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      cards_fold.style.transform = "scale(1)";
    });
    gbb2.addEventListener("click", () => {
      gesture.style.transform = "scale(1)";
      OV.style.transform = "scale(0)";
    });
    gbb3.addEventListener("click", () => {
      gesture.style.transform = "scale(1)";
      HI.style.transform = "scale(0)";
    });
    gbb4.addEventListener("click", () => {
      gesture.style.transform = "scale(1)";
      CA.style.transform = "scale(0)";
    });
    gbb5.addEventListener("click", () => {
      gesture.style.transform = "scale(1)";
      VA.style.transform = "scale(0)";
    });
    overview.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      OV.style.transform = "scale(1)";
    });
    history.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      HI.style.transform = "scale(1)";
    });
    category.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      CA.style.transform = "scale(1)";
    });
    value.addEventListener("click", () => {
      gesture.style.transform = "scale(0)";
      VA.style.transform = "scale(1)";
    });
    registerLink.addEventListener("click", () => {
      wrapper.classList.add("active");
    });

    loginLink.addEventListener("click", () => {
      wrapper.classList.remove("active");
    });
    contactPopup.addEventListener("click", () => {
      wrapperContact.classList.add("active-popup");
      wrapper.classList.remove("active-popup");
      cards_fold.style.transform = "scale(0)";
      gesture.style.transform = "scale(0)";
      OV.style.transform = "scale(0)";
      HI.style.transform = "scale(0)";
      CA.style.transform = "scale(0)";
      VA.style.transform = "scale(0)";
    });
    btnPopup.addEventListener("click", () => {
      wrapper.classList.add("active-popup");
      cards_fold.style.transform = "scale(0)";
      wrapperContact.classList.remove("active-popup");
      gesture.style.transform = "scale(0)";
      OV.style.transform = "scale(0)";
      HI.style.transform = "scale(0)";
      CA.style.transform = "scale(0)";
      VA.style.transform = "scale(0)";
      wrapperContact.classList.remove("active-popup");
    });
    toabout.addEventListener("click", () => {
      cards_fold.style.transform = "scale(0)";
      gesture.style.transform = "scale(1)";
      gesture.style.position = "center";
      OV.style.transform = "scale(0)";
      HI.style.transform = "scale(0)";
      CA.style.transform = "scale(0)";
      VA.style.transform = "scale(0)";
      wrapperContact.classList.remove("active-popup");
      wrapper.classList.remove("active-popup");
    });

    iconClose.addEventListener("click", () => {
      wrapper.classList.remove("active-popup");
      cards_fold.style.transform = "scale(1)";
    });
    iconCloseContact.addEventListener("click", () => {
      wrapperContact.classList.remove("active-popup");
      cards_fold.style.transform = "scale(1)";
    });
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.text-base {
  height: 80%;
  width: 80%;
  margin-top: 3%;
  padding-bottom: 20px;
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: scale(0);
  transition: transform 0.5s ease, height 0.2s ease;
}
.text-base h2 {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  color: white;
}
.text-base p {
  margin-left: 30px;
  margin-right: 30px;
  text-indent: 2em;
  font-size: 1.4em;
  line-height: 1.5;
  color: white;
}
.gbb,
.gbb:focus {
  margin-left: 100%;
  position: center;
  justify-self: center; /* 水平居中 */
  align-self: center;
  height: 100%;
  width: 30%;
  padding: 10px 25px;
  background: transparent;
  border: 2px solid #fff;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s;
}

.gbb:hover {
  background: #fff;
  color: #162938;
}
.gbb2,
.gbb2:focus {
  margin-top: 10px;
  position: center;
  justify-self: center; /* 水平居中 */
  align-self: center;
  margin-left: 40%;
  height: 10%;
  width: 20%;
  padding: 10px 25px;
  background: transparent;
  border: 2px solid #fff;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s;
}

.gbb2:hover {
  background: #fff;
  color: #162938;
}
.gesture-info {
  padding-top: 7%;
  height: 90%;
  width: 90%;
  display: grid;
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  transform: scale(0);
  transition: transform 0.5s ease, height 0.2s ease;
  position: absolute;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  border: 2px black;
}
.gesture-info div {
  width: 90%;
  height: 90%;
  border: 2px;
  border-radius: 10px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Lucida Sans", "Noto Sans",
    sans-serif;
  font-size: 2em;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  transition: transform 0.6s ease;
  color: #0b3669ff;
  background-size: cover;
  background-position: center;
}
.gesture-info div p {
  height: 100%;
  width: 100%;
  margin: 5%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.gesture-info div:hover {
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  font-size: 1.3em;
  padding: 1px;
  margin: 1px;
}
#overview {
  background: url("../statics/1.png") no-repeat;
}
#overview p:before {
  content: "OVERVIEW";
}
#overview p:hover::before {
  text-indent: 2em;
  content: "Sign language is a manual language that uses gestures, movements, and variations in hand shape to convey specific meanings or words, simulating images or phonemes. ";
}
#history {
  background: url("../statics/2.png") no-repeat;
}
#history p:before {
  content: "HISTORY";
}
#history p:hover::before {
  text-indent: 2em;
  content: "Sign language existed in ancient times, and was not exclusively for deaf people. Ancient people used gestures to communicate their ideas, and later developed languages.";
}
#category {
  background: url("../statics/3.png") no-repeat;
}
#category p:before {
  content: "CATEGORY";
}
#category p:hover::before {
  text-indent: 2em;
  content: "There are approximately 300 sign languages still in use around the world. This number is an estimate, as newly developed sign languages often undergo creolization.";
}
#Value-identity {
  background: url("../statics/4.png") no-repeat;
}
#Value-identity p:before {
  content: "VALUE&IDENTITY";
}
#Value-identity p:hover::before {
  text-indent: 2em;
  content: "Sign language existed in ancient times, and was not exclusively for deaf people. Ancient people used gestures to communicate their ideas, and later developed languages.";
}
.login_signup_page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url("../statics/background.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}

.logo {
  font-size: 2em;
  color: #fff;
  user-select: none;
}

.navigation a {
  position: relative;
  font-size: 1.1em;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  margin-left: 40px;
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 5px;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.5s;
}

.navigation a:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

.navigation .btnLogin-popup {
  width: 130px;
  height: 50px;
  background: transparent;
  border: 2px solid #fff;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  color: #fff;
  font-weight: 500;
  margin-left: 40px;
  transition: 0.5s;
}

.navigation .btnLogin-popup:hover {
  background: #fff;
  color: #162938;
}

.wrapper {
  position: absolute;
  width: 400px;
  height: 440px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: scale(0);
  transition: transform 0.5s ease, height 0.2s ease;
}

.wrapper.active-popup {
  transform: scale(1);
}

.wrapper.active {
  height: 520px;
}

.wrapper-contact {
  position: absolute;
  width: 500px;
  height: 440px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  overflow: hidden;
  transform: scale(0);
  transition: transform 0.5s ease, height 0.2s ease;
}

.wrapper-contact.active-popup {
  transform: scale(1);
}

.wrapper-contact .icon-close-contact {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: #162938;
  font-size: 2em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 20px;
  cursor: pointer;
  z-index: 1;
}
.wrapper .form-box {
  width: 100%;
  padding: 40px;
}

.wrapper .form-box.login {
  transition: transform 0.18s ease;
  transform: translateX(0);
}

.wrapper.active .form-box.login {
  transition: none;
  transform: translateX(-400px);
}

.wrapper .form-box.register {
  position: absolute;
  transition: none;
  transform: translateX(400px);
}

.wrapper.active .form-box.register {
  transition: transform 0.18s ease;
  transform: translateX(0);
}

.wrapper .icon-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: #162938;
  font-size: 2em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 20px;
  cursor: pointer;
  z-index: 1;
}

.wrapper-contact .div-contact {
  font-size: 2em;
  color: #fff;
  position: absolute;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  margin-top: 50px;
}

.wrapper-contact .div-contact-us {
  font-size: 21px;
  color: #fff;
  border-radius: 20px;
  position: absolute;
  top: 40%;
  left: 7%;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  text-align: center;
}

.form-box h2 {
  font-size: 2em;
  color: #162938;
  text-align: center;
}

.input-box {
  position: relative;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #162938;
  margin: 30px 0;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #162938;
  font-weight: 500;
  pointer-events: none;
  transition: 0.5s;
}

.input-box label.up {
  top: -5px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  color: #162938;
  font-weight: 600;
  padding: 0 35px 0 5px;
}

.input-box .icon {
  position: absolute;
  right: 8px;
  font-size: 1.2em;
  color: #162938;
  line-height: 57px;
}

.remember-forgot {
  font-size: 0.9em;
  color: #162938;
  font-weight: 500;
  margin: -15px 0 15px;
  display: flex;
  justify-content: space-between;
}

.remember-forgot label input {
  accent-color: #162938;
  margin-right: 3px;
}

.remember-forgot a {
  color: #162938;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  height: 45px;
  background: #162938;
  border: none;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  color: #fff;
  font-weight: 500;
}

.login-register {
  font-size: 0.9em;
  color: #e3e2e2;
  text-align: center;
  font-weight: 500;
  margin: 25px 0 10px;
}

.login-register p a {
  color: #e3e2e2;
  text-decoration: none;
  font-weight: 600;
}

.login-register p a:hover {
  text-decoration: underline;
}

.cards_fold {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* background: #0f222f; */
  transform: scale(1);
  transition: transform 0.5s ease, height 0.2s ease;
}
.container_card {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container_card .glass {
  position: relative;
  width: 200px;
  height: 240px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  transform: rotate(calc(var(--r) * 1deg));
}
.container_card:hover .glass {
  transform: rotate(0deg);
  margin: 0 20px;
}
.container_card .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container_card .glass i {
  font-size: 4em;
  color: #fff;
}
</style>
